<template>
	<view class="pageIndex">
		<view class="AlreadyLoggedIn">
			<view class="linkBox">
				<view :style="{'height': `${statusBarHeight}px`, 'background-color': '#FFF'}"></view>
				<uni-nav-bar backgroundColor="#FFF;" color="#333" title="IHG Event" @clickLeft="goBack" left-icon="left"
					:border="false" />
				<view class="headerChangeLanguage">
					<view class="logo">
						<image :src="`${baseUrl}/static/img/home-logo.png`" />
					</view>
					<view class="language" @click="changeLanguage">
						<view :class="$t('language.name') == '中文' ? 'langeageZh' : 'langeageEn'"></view>
					</view>
					<!-- <view @click="changeLanguage" :class="$t('language.name') == '中文'?'langeageZh':'langeageEn'"></view> -->
				</view>
				<view class="linkHref">
					<view @click="toMeetingInfo(1)">
						<image :src="`${baseUrl}/static/img/icon1_03.png`" />
						{{$t('language.meeting')}}
					</view>
					<view @click="toMeetingInfo(2)">
						<image :src="`${baseUrl}/static/img/icon2_03.png`" />
						{{$t('language.Registrate')}}
					</view>
					<view @click="toMeetingInfo(3)">
						<image :src="`${baseUrl}/static/img/icon3_03.png`" />
						{{$t('language.Schedule')}}
					</view>
					<view @click="toMeetingInfo(4)">
						<image :src="`${baseUrl}/static/img/icon4_03.png`" />
						{{$t('language.Attendees')}}
					</view>
					<!-- <view @click="toSaoyisao()"> -->
					<view @click="toMeetingInfo(5)">
						<image :src="`${baseUrl}/static/img/icon5_03.png`" />
						{{$t('language.Attendance')}}
					</view>
					<view @click="toMeetingInfo(6)">
						<image :src="`${baseUrl}/static/img/icon6_03.png`" />
						{{$t('language.share')}}
					</view>
					<view @click="toMeetingInfo(7)">
						<image :src="`${baseUrl}/static/img/icon7_03.png`" />
						{{$t('language.Photo')}}
					</view>
					<view @click="toMeetingInfo(8)">
						<image :src="`${baseUrl}/static/img/icon8_03.png`" />
						{{$t('language.LiveInteraction')}}
					</view>
					<view @click="toMeetingInfo(9)">
						<image :src="`${baseUrl}/static/img/icon9_03.png`" />
						{{$t('language.Contact')}}
					</view>
				</view>
				<view class="twoLinkHref">
					<view @click="toMeetList">{{$t('language.meeting13')}}</view>
					<view @click="toMeetingInfo(8)">{{$t('language.meeting14')}}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';

	import {
		get_form_list,
		info,
		enroll
	} from "@/api/user";
	let timer = null
	export default {
		name: "pageIndex",
		data() {
			return {
				baseUrl: HTTP_REQUEST_URL,
				statusBarHeight: 44,
				show: true,
				flag: 3,
				isFlag: true,
				tabOnline: 0,
				evenId: "",
				meetInfo: "",
				selected2: '',
				scanQRCode: "",
				timeList: [],
				user: '',
				content: [],
				FormList: [],
				questionList: '',
				questionList2: ''
			};
		},
		onLoad(o) {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			let evenId = o.evenId;
			// let istype = o.istype;
			// if (istype == 1) {
			// 	this.flag = 0
			// } else {
			// 	this.flag = 1
			// }
			this.evenId = evenId;
			//this.getForm();
			//this.getInfo();
		},
		created() {},
		methods: {
			async getForm() {
				//获取表单
				const response = await get_form_list({
					event_id: this.evenId
				});
				if (response.code == 200) {
					console.log(response);
					this.FormList = response.data;
					this.user = response.user;
				} else {
					console.log(response);
				}
			},
			getInfo() {
				info({
					event_id: this.evenId
				}).then(
					response => {
						if (response.code == 200) {
							console.log(response);
							this.meetInfo = response.data;
							this.timeList = response.data.schedule.date;
							this.content = response.data.schedule.content;
							this.$nextTick(() => {
								if (response.data.is_enroll == 1) {
									this.flag = 1;
								} else {
									this.flag = 0;
								}
								this.show = false
							})
						} else {
							console.log(response);
						}
					},
					err => {
						console.log(err)
					}
				);
			},
			async formSubmit() {
				//报名

				let dataList = this.FormList;
				for (let i in dataList) {
					if (dataList[i].message == "" || dataList[i].message == undefined) {
						uni.showToast({
							title: dataList[i].name + "不能为空",
							icon: 'none'
						})
						return false;
					}
				}
				if (this.questionList == '' || this.questionList2 == '') {
					uni.showToast({
						title: '列表框为必选项，请返回选择',
						icon: 'none'
					})
					return false
				}
				uni.showLoading({
					title: 'loading...'
				})
				// return false
				const response = await enroll({
					event_id: this.evenId,
					info: JSON.stringify(this.FormList),
					question: this.questionList,
					question1: this.questionList2
				});
				uni.hideLoading()
				if (response.code == 200) {
					console.log(response);
					this.isFlag = false;
					uni.showToast({
						title: response.msg,
						icon: 'success'
					})
					setTimeout(() => {
						this.flag = 1;
						Toast.clear()
					}, 1000);
				} else {
					uni.showToast({
						title: response.msg,
						icon: 'fail'
					})
				}
			},
			async toSaoyisao() {
				wx.scanQRCode({
					desc: "scanQRCode desc",
					needResult: 1, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，
					scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是条形码（一维码），默认二者都有
					success: (res) => {
						// 回调
						this.scanQRCode = res.resultStr;
						
						sign({
							event_id: this.scanQRCode
						}).then(
							resdata => {
								if (resdata.code == 200) {
									uni.showToast({
										title: resdata.msg,
										icon: 'none'
									})
									setTimeout(() => {
										uni.navigateTo({
											url: '/pages/Registrate/sign?scanQRCode=' + this.scanQRCode
										})
									}, 500)
												
								} else {
									uni.showToast({
										title: resdata.msg,
										icon: 'none'
									})
								}
							},
							err => {
								console.log(err)
							}
						);
					},
					error: function(res) {
						if (res.errMsg.indexOf("function_not_exist") > 0) {
							alert("版本过低请升级");
						}
					}
				});
			},
			chooseTimeTab(index) {
				console.log(index);
				this.tabOnline = index;
			},
			toMeetingInfo(toindex) {
				if (toindex == 1) {
					uni.navigateTo({
						url: '/pages/indexBox/meetingInfo?evenId=' + this.evenId
					})
				} else if (toindex == 2) {
					uni.navigateTo({
						url: '/pages/Registrate/Registrate?evenId=' + this.evenId
					})
				} else if (toindex == 3) {
					uni.navigateTo({
						url: '/pages/ConferenceDate/ConferenceDate?evenId=' + this.evenId
					})
				} else if (toindex == 4) {
					uni.navigateTo({
						url: '/pages/Attendees/Attendees?evenId=' + this.evenId
					})
				} else if (toindex == 5) {
					uni.navigateTo({
						url: '/pages/indexBox/noOpen'
					})
				} else if (toindex == 6) {
					uni.navigateTo({
						url: '/pages/indexBox/noOpen'
					})
				} else if (toindex == 7) {
					uni.navigateTo({
						url: '/pages/indexBox/noOpen'
					})
				} else if (toindex == 8) {
					uni.navigateTo({
						url: '/pages/indexBox/noOpen'
					})
				} else {
					uni.navigateTo({
						url: '/pages/aboutUs/aboutUs'
					})
				}
			},
			toMeetList() {
				uni.navigateTo({
					url: '/pages/indexBox/index'
				})
			},
			goBack() {
				uni.navigateBack()
			},
			changeLanguage() {
				if (this.$i18n.locale == 'zh') {
					this.$i18n.locale = 'en';
					uni.setStorageSync('locale', 'en')
				} else {
					this.$i18n.locale = 'zh';
					uni.setStorageSync('locale', 'zh')
				}
			}
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	.linkBox {
		width: 100%;
		height: 100vh;
		background: url("https://wechatwork.ihg.com.cn/static/event/20191219115231.jpg") no-repeat center center;
		background-size: cover;
		position: relative;
	}
	.noEntryBgcolor {
		background: rgba(0, 0, 0, 0.1);
		position: absolute;
		left: 0;
		top: 0;
		z-index: 99;
		width: 100%;
		box-sizing: border-box;
	}
	.headerChangeLanguage {
		height: 100upx;
		background: #fff;
		padding: 0 30upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 2upx 4upx #ccc;
		width: 100%;
		box-sizing: border-box;
	}
	
	.logo image {
		width: 178upx;
		height: 30upx;
	}
	
	
	.language {
		flex-shrink: 0;
	}
	
	.langeageZh {
		height: 30upx;
		width: 86upx;
		background: url($image-base-url + '/static/img/EN-17.png') no-repeat;
		background-size: 86upx 30upx;
	}
	
	.langeageEn {
		height: 30upx;
		width: 86upx;
		background: url($image-base-url + '/static/img/CH-17.png') no-repeat;
		background-size: 86upx 30upx;
	}

	.linkHref {
		color: #fff;
		display: flex;
		padding: 50upx 30upx;
		align-items: center;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.linkHref>view {
		width: 33.33%;
		text-align: center;
		height: 300upx;
	}

	.linkHref>view>image {
		width: 130upx;
		height: 130upx;
		display: block;
		margin: 0 auto;
		margin-bottom: 16upx;
	}

	.twoLinkHref {
		width: 100%;
		height: 90upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30upx;
		box-sizing: border-box;
	}

	.twoLinkHref>view {
		width: 330upx;
		height: 90upx;
		border-radius: 90upx;
		text-align: center;
		line-height: 86upx;
	}

	.twoLinkHref>view:first-child {
		background: #d96932;
		color: #fff;
		font-weight: bold;
		font-size: 36upx;
		border: 4upx solid #d96932;
	}

	.twoLinkHref>view:last-child {
		color: #fff;
		font-weight: bold;
		font-size: 36upx;
		border: 4upx solid #fff;
		box-sizing: border-box;
	}

	.noentryBgbox {
		width: 100%;
		position: relative;
	}

	.noentryBgbox>image {
		width: 100%;
		display: block;
	}

	.meetingInfoModel {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 98;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.41);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.message {
		padding: 30upx;
		box-sizing: border-box;
		color: #fff;
		text-align: center;
		position: relative;
		top: -120upx;
	}

	.message h3 {
		font-size:40upx;
		padding-bottom: 10upx;
		border-bottom: 2upx solid #fff;
	}

	.message h4 {
		font-size: 36upx;
		padding: 20upx 0;
	}

	.selectBtn {
		width: 100%;
		display: flex;
		justify-content: center;
		position: absolute;
		bottom: 60upx;
		left: 0;
	}

	.selectBtn>image {
		width: 40upx;
		height: 24upx;
	}

	.formBox {
		padding: 40upx 30upx 80upx;
	}

	.title {
		color: #d96932;
		font-size: 44upx;
		margin-bottom: 40upx;
	}

	.lablegroup,
	.lablegroupTwo {
		padding-bottom: 30upx;
	}

	.lablegroupTwo .lablegroup {
		padding-bottom: 0;
	}

	.lableTitle {
		color: #444;
		padding: 12upx 0;
	}

	.lableInput {
		position: relative;
	}

	.lableInput input {
		width: 100%;
		height: 70upx;
		background: #f6f5ef;
		padding-left: 16upx;
		border-radius: 8upx;
		color: #707372;
	}

	.lableInput select {
		width: 100%;
		height: 70upx;
		background: #f6f5ef;
		padding-left: 16upx;
		border-radius: 8upx;
		color: #707372;
		border: none;
		font-size: 28upx;
	}

	.lableInput select option {
		color: #707372;
	}

	.submitFormGroup {
		padding: 0 30upx;
		margin-top: 40upx;
	}

	.submitFormGroup>view {
		width: 100%;
		height: 90upx;
		background: #d96932;
		color: #fff;
		border-radius: 90upx;
		text-align: center;
		line-height: 90upx;
		font-size: 32upx;
	}

	.meetingTitle {
		color: #d96932;
		font-size: 44upx;
		margin-bottom:40upx;
	}

	.meetingTime {
		padding: 30upx 30upx 80upx;
	}

	.meetingTimeTab {
		width: 100%;
		height: 70upx;
		overflow-x: scroll;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
	}

	.meetingTimeTab::-webkit-scrollbar {
		display: none;
	}

	.meetingTimeTab .tabClickTime {
		float: left;
		width: 160upx;
		height: 70upx;
		border-radius: 8upx;
		background: #f6f5ef;
		color: #444444;
		text-align: center;
		line-height: 70upx;
		margin-right: 30upx;
	}

	.timeActive {
		color: #fff !important;
		background: #d96932 !important;
	}

	.Time {
		padding: 30upx 0;
	}

	.dayTime {
		padding: 30upx 0;
		border-bottom: 2upx solid #dbdbdb;
		clear: both;
	}

	.morning .dayTime:last-child {
		border-bottom: none;
	}

	.afternoon .dayTime:last-child {
		border-bottom: none;
	}

	.morning {
		border-bottom: 2upx solid #d96932 !important;
	}

	.afternoon {
		border-bottom: 2upx solid #d96932;
	}

	.dayTime>text:first-child {
		width: 200upx;
		float: left;
		color: #d96932;
		font-weight: bold;
	}

	.dayTime>text:last-child {
		width: 480upx;
		float: left;
		color: #444444;
	}

	.trafficGroup {
		width: 100%;
		margin-bottom: 30upx;
	}

	.trafficGroup .imgbox {
		width: 100%;
		position: relative;
	}

	.imgbox image {
		width: 100%;
		display: block;
		height: 310upx;
	}

	.imgModel {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: absolute;
		left: 0;
		top: 0;
		border-radius: 20upx;
	}

	.leftModel {
		width: 160upx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		background: rgba(0, 0, 0, 0.61);
		border-radius: 12upx 0 0 12upx;
		color: #fff;
		font-size: 36upx;
	}

	.rightModel {
		width: 560upx;
		height: 100%;
		background: rgba(0, 0, 0, 0.41);
		border-radius: 0 12upx 12upx 0;
		color: #fff;
		font-size: 28upx;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		box-sizing: border-box;
		padding: 60upx 30upx;
	}

	.rightModel view {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		width: 100%;
	}

	.rightModel view:first-child {
		padding-left:40upx;
		background: url($image-base-url + '/static/img/addressIcon.png') no-repeat left center;
		background-size: 21upx 28upx;
	}

	.rightModel view:nth-child(2) {
		padding-left:40upx;
		background: url($image-base-url + '/static/img/timeIcon.png') no-repeat left center;
		background-size: 22upx 22upx;
	}

	.rightModel view:last-child {
		padding-left:40upx;
		background: url($image-base-url + '/static/img/moneyIcon.png') no-repeat left center;
		background-size: 22upx 22upx;
	}

	.swipertop {
		display: flex;
		justify-content: flex-start;
		padding: 20upx 0;
	}

	.swipertop image {
		width: 200upx;
		height: 130upx;
	}

	.swipertop view {
		padding: 0 0 0 16upx;
		font-size: 24upx;
		color: #444;
		display: -webkit-box;
		overflow: hidden;
		white-space: normal !important;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
	}

	.hotelBanner {
		width: 100%;
	}

	.hotelBanner image {
		width: 100%;
		display: block;
		height: 340upx;
		border-radius: 8upx
	}

	.footerBottom {
		padding: 20upx;
	}

	.footerBottom image {
		width: 100%;
	}

	.footerLinkHref {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:40upx 30upx;
		box-sizing: border-box;
	}

	.footerLinkHref>view {
		width: 330upx;
		height: 90upx;
		border-radius: 90upx;
		text-align: center;
		line-height: 86upx;
	}

	.footerLinkHref>view:first-child {
		background: #d96932;
		color: #fff;
		font-size: 36upx;
		border: 4upx solid #d96932;
	}

	.footerLinkHref>view:last-child {
		background: #fff;
		color: #444;
		font-size: 36upx;
		border: 2upx solid #d96932;
	}

	.van-overlay {
		z-index: 99 !important;
		background: rgba(0, 0, 0, 0.8)
	}

	.wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.block {}
</style>